<template>
  <div>
    <el-row>
      <span id="title"><b>转账管理</b></span>
    </el-row>

    <el-row class="shaixuan_1"
            type="flex"
            align="middle"
            style="text-align: center">
      <el-col :span="3">
        <span>转账数据</span>
      </el-col>
      <el-col :span="3"
              :offset="4">
        <el-button type="primary" @click="getExcel()">导出数据</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getAll()">全部</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getWeek()">最近一周</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getMonth()">最近30天</el-button>
      </el-col>
      <!-- <el-col :span="5">
        <el-date-picker v-model="value"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @click="getDate(value)">
        </el-date-picker>
      </el-col> -->
    </el-row>

    <el-row type="flex"
            align="middle"
            class="shaixuan_20"
            style="text-align: center">
      <el-col :span="8"><b><span class="countComputed">可用金额<div>{{availableFunds}}</div></span></b></el-col>
      <el-col :span="8"><b><span class="countComputed">转账金额<div>{{eftSum}}</div></span></b></el-col>
      <el-col :span="8"><b><span class="countComputed">转账笔数<div>{{eftCount}}</div></span></b></el-col>
    </el-row>
    <el-row type="flex"
            align="middle"
            id="data_1">
      <el-col :span="3">
        <i class="iconfont icon-querylist"></i>
        <span>转账记录</span>
      </el-col>
      <el-col :span="9"
              :offset="12">
        <el-button type="primary"
                   @click="handleEdit()">新增转账</el-button>
      </el-col>
    </el-row>
    <el-row>
      <TransferManagementData 
                            style="height:100%"
                            ref="child"></TransferManagementData>
    </el-row>
    //新增转账页面
    <el-dialog title="发起转账"
               :visible.sync="editFormVisible">
      <el-form :model="form"
               ref="editForm"
               :rules="rules">
        <el-form-item prop="recipient"
                      label="接收人"
                      :label-width="formLabelWidth">
          <el-input v-model="form.recipient"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="转账金额"
                      :label-width="formLabelWidth">
          <el-input v-model="form.amount"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="bankNumber"
                      label="银行卡号"
                      :label-width="formLabelWidth">
          <el-input v-model="form.bankNumber"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="explain"
                      label="转账说明"
                      :label-width="formLabelWidth">
          <el-input v-model="form.explain"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
     //数据显示页面
    
    <el-dialog title=""
               :visible.sync="visible"
                >
      <el-table :model="table"
                ref="editForm"
                :data="tableData">
        <el-table-column prop="recipient"
                      label="接收者"
                      :label-width= "100">
        </el-table-column>
        <el-table-column prop="amount"
                      label="银行卡号"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="status"
                      label="状态"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="explain"
                      label="说明"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="originator"
                      label="发起人"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="transferTime"
                      label="转账时间"
                      :label-width="100">
        </el-table-column>
        
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import TransferManagementData from './transferManagementData.vue';
export default {
  components: {
    TransferManagementData
  },

  data () {
    return {
      // 控制编辑页面显示与隐藏
      editFormVisible: false, 
      //编辑页面数据
      form: {
        recevier: '',
        amount: 0,
        bankNumber: '',
        sender: '',
        description: ''
      },
      addEftVisble: false,
      availableFunds: 0,
      eftSum: 0,
      eftCount: 0,
      formLabelWidth: '120px',
      rules: {
        recevier: [{ required: true, message: '请输入接收人', trigger: 'blur' }],
        bankNumber: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }]
      },
      tableData:[{
        recipient:'',
        amount:'',
        bankNumber:'',
        explain:'',
        originator:'',
        transferTime:''
        
      }],
      //页面显示
      visible: false,
    }
  },
  mounted () {
    this.$axios.get("/finance/transfer/findAll").then(res => {
      if (res.data.code === 200) {
        console.log(res)
        this.tableData = res.data.data
        this.availableFunds = 100000000
      }
    });
     this.$axios.get("/finance/transfer/eftSum").then(res => {
        this.eftSum  = res.data
    });
     this.$axios.get("/finance/transfer/eftCount").then(res => {
        this.eftCount  = res.data
    });
  },
  methods: {
    //显示新增、编辑界面
    handleEdit: function (obj) {
      this.editFormVisible = true;
        //清空数据
        this.form.recevier = "";
        this.form.amount = "";
        this.form.bankNumber = "";
        this.form.sender = "";
        this.form.description = "";
    },
    

    // 编辑、增加页面保存方法
    submitForm() {
            this.$axios.post("/finance/transfer/updateOne", this.form)
            .then((res) => {
                //关闭弹窗
                this.editFormVisible = false;
                if (res.data.code == 200) {
                    //刷新数据
                    this.getAll();
                    this.$message({
                        type: "success",
                        message: "保存成功！",
                    });
                } else {
                    this.$message({
                        type: "info",
                        message: res.data.message,
                    });
                }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.$message.error(err.response.data.message);
            });
            
        },
      
    

    getAll(){
        this.visible = true;
        this.$axios.get("/finance/transfer/findAll").then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
                this.availableFunds = 100000000
            }
        })
    },

    getWeek(){
        this.visible = true;
        this.$axios.get("/finance/transfer/findAllByWeek").then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
    },

    getMonth(){
        this.visible = true;
        this.$axios.get("/finance/transfer/findAllByMonth").then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
    },

    getDate(value){
        this.visible = true;
        this.$axios.get("/finance/transfer/findAllByDate" + value).then(res => {
            if (res.data.code === 200) {
                this.TransferManagementData.tableData = res.data.data
            }
        })
    },
    getExcel(){
        this.visible = true;
        this.getAll();
        this.$axios.get("/finance/transfer/export",{
            responseType:'blob'
        }).then(response => {
           //通过header中获取返回的文件名称
        let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1]
        let blob = new Blob([response.data], { type: "application/vnd.ms-excel" })
        let downloadElement = document.createElement("a")
        var href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        //指定下载的文件的名称，切记进行decode
        downloadElement.download = decodeURI(fileName)
        document.body.appendChild(downloadElement)
        downloadElement.click()
        //移除临时创建对象，释放资源
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      });
    }
  }
}


</script>
<style scoped>
#title {
  font-size: 30px;
}
.shaixuan_1 {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
.shaixuan_2 {
  height: 50px;
}
#data_1 {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  background-color: rgb(241, 241, 241);
}
.menu {
  width: 50%;
  text-align: center;
}
.countComputed {
  font-size: 2em;
}
</style>